<!-- 封装VanFieldCheckbox组件 -->
<template>
  <div class="dh-field">
    <div class="van-hairline--bottom">
      <van-field
        v-model="resultLabel"
        v-bind="$attrs"
        readonly
        :is-link="$attrs.disabled === undefined"
        error-message-align="right"
        input-align="right"
        @click="showPopu($attrs.disabled)"
        class="dh-cell"
      />
      <van-popup v-model="show" position="bottom" class="">
        <div class="van-picker__toolbar">
          <button type="button" class="van-picker__cancel" @click="cancel">取消</button>
          <div class="van-ellipsis van-picker__title">{{ $attrs.label }}</div>
          <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
        </div>
        <div class="checkbox-con" style="max-height: 264px; overflow-y: auto">
          <van-field
            class="searchVal"
            v-model="searchVal"
            placeholder="搜索"
            @input="search"
            v-if="isSearch"
            input-align="left"
          />
          <van-cell class="selectAll" title="全选" v-if="selectAll">
            <template #right-icon>
              <van-checkbox name="all" @click="toggleAll" v-model="checkedAll" />
            </template>
          </van-cell>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" class="dataList" @load="nextPage">
            <van-checkbox-group v-model="checkboxValue" @change="change" ref="checkboxGroup">
              <van-cell-group>
                <van-cell
                  v-for="(item, index) in currentPageData"
                  clickable
                  :key="item[option.value]"
                  :title="item[option.label]"
                  @click="toggle(index)"
                >
                  <template #right-icon>
                    <van-checkbox :name="item[option.value]" ref="checkboxes" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-checkbox-group>
          </van-list>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VanFieldCheckbox',
  model: {
    prop: 'selectValue'
  },
  props: {
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    selectValue: {
      type: Array,
      default: function () {
        return []
      }
    },
    option: {
      type: Object,
      default: function () {
        return { label: 'label', value: 'value' }
      }
    },
    isSearch: {
      type: Boolean,
      default: false
    },
    selectAll: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    resultLabel: {
      get() {
        const res = this.columns.filter(item => {
          return this.resultValue.indexOf(item[this.option.value]) > -1
        })
        const resLabel = res.map(item => {
          return item[this.option.label]
        })
        return resLabel.join(',')
      },
      set() {}
    }
  },
  data() {
    return {
      show: false,
      searchVal: '',
      columnsData: JSON.parse(JSON.stringify(this.columns)),
      checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
      checkedAll: false,
      resultValue: JSON.parse(JSON.stringify(this.selectValue)),
      loading: false,
      finished: false,
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [] //当前页显示内容
    }
  },
  mounted() {},
  methods: {
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData() {
      let begin = (this.currentPage - 1) * this.pageSize
      let end = this.currentPage * this.pageSize
      this.currentPageData = [...this.currentPageData, ...this.columnsData.slice(begin, end)]
    },
    // 下一页
    nextPage() {
      if (this.currentPage == this.totalPage) {
        this.loading = false
        this.finished = true
      } else {
        this.loading = false
        this.currentPage++
        this.setCurrentPageData()
      }
    },
    search(val) {
      if (val) {
        this.columnsData = this.columns.filter(item => item.euipment_name.includes(val))
      } else {
        this.columnsData = JSON.parse(JSON.stringify(this.columns))
      }
    },
    getData(val) {
      const res = this.columnsData.filter(item => {
        return val.indexOf(item[this.option.value]) > -1
      })
      return res
    },
    onConfirm() {
      this.resultValue = this.checkboxValue
      this.show = !this.show
      this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
    },
    change(val) {
      this.$emit('change', val, this.getData(this.resultValue))
    },
    cancel() {
      this.show = !this.show
      this.$emit('cancel', this.resultValue)
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    toggleAll(all) {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    },
    showPopu(disabled) {
      this.columnsData = JSON.parse(JSON.stringify(this.columns))
      this.checkboxValue = JSON.parse(JSON.stringify(this.selectValue))
      this.resultValue = JSON.parse(JSON.stringify(this.selectValue))
      if (disabled !== undefined && disabled !== false) {
        return false
      } else {
        this.show = !this.show
      }
    }
  },
  watch: {
    selectValue: function (newVal) {
      this.resultValue = newVal
    },
    resultValue(val) {
      this.searchVal = ''
      this.columnsData = JSON.parse(JSON.stringify(this.columns))
      this.$emit('input', val)
    },
    columnsData: {
      handler(val) {
        this.currentPageData = []
        this.currentPage = 1
        this.finished = false
        // 计算一共有几页
        this.totalPage = Math.ceil(this.columnsData.length / this.pageSize)
        // 计算得0时设置为1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage
        this.setCurrentPageData()
        if (val.length && val.length === this.checkboxValue.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true
    },
    checkboxValue: {
      handler(val) {
        if (val.length && val.length === this.columnsData.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.dh-field {
  padding: 0 16px;
  background: #fff;
  .dh-cell.van-cell {
    padding: 10px 0;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
  .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
.searchVal {
  position: fixed;
  // height: 20px;
  bottom: 232px;
  z-index: 9999;
}
.selectAll {
  position: fixed;
  // height: 20px;
  bottom: 195px;
  z-index: 9999;
}
.dataList {
  margin-top: 65px;
  width: 100%;
  height: 200px;
}
</style>
